@charset "utf-8";
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,textarea,blockquote,img{margin:0;padding:0}
body{font:14px/1.2 Tahoma,Helvetica,Arial,"微软雅黑", PingFang SC,STXihei,"宋体","华文细黑",sans-serif;line-height: 22px;}
input,select,textarea{font-family:Tahoma, Helvetica, Arial, "微软雅黑" , PingFang SC, STXihei, "华文细黑","\5b8b\4f53", sans-serif;color:#666;outline:none;box-sizing: content-box;}
dl,ul,li,dt,dd{list-style:none;}
em,b,i,strong{font-style: normal;font-weight: normal;}
img{max-width: 100%;border:none;vertical-align: middle;}
h1,h2,h3,h4,h5,h6{font-weight: bold;color: #666;}
input::-moz-focus-inner{padding:0;}
input,select,textarea{outline-style:none;resize:none;}
button{outline:none;}
table{border-collapse:collapse;border-spacing:0;table-layout:fixed;}
header, section, article, aside, footer { display:block;}


input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}
@import "compass";
@import "my_mixins/_var";
@import "my_mixins/_sprite";
@import "my_mixins/_btn";
@import "my_mixins/_component";
@import "my_mixins/_form";
@import "my_mixins/_buyLayer";

/*common style*/
body {background: $bg-default;color: $font-default-color;font-size: $font-default-size;}
a {text-decoration: none;outline:none;}
h1 {font-size: 18px;}
h2 {font-size: 16px;}
h3 {font-size: 14px;}

.clearfix {@include pie-clearfix;}
.fl{@include float-left;}
.fr{@include float-right;}
.none {display: none !important;}
.hidePwd {position: absolute; opacity: 0;left: -9999px;}
.tl {text-align: left;}
.tr {text-align: right;}
.tc {text-align: center;}
.hr {height: 1px;background: $bg-info;}
.c-danger,.red {color:$font-danger-color;}
.c-primary {color:$font-primary-color;}
.c-info {color:$font-info-color;}
.c-info-light {color: $font-info-color-light;}
.fz16 {font-size: 16px;}
.fw_bold {font-weight: bold;}
.break-all {word-break: break-all;word-wrap: break-word;}
.break-word {word-wrap: break-word;text-align: left;}
.ellipsis {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

.max-w {width: $max-w;min-width: $max-w;margin: 0 auto;@include pie-clearfix;}
.min-w {min-width: $max-w;}
h1.header {height: 60px;line-height: 60px;padding-left: 30px;margin-bottom: 20px;background: $bg-white;}
.header3 {
  h1 {font-size: 24px;margin-bottom: 10px;color: #222;}
  p {color: $font-info-color-light;}
  .r {float: right;}
}
/*多列布局*/
.col1 { @include col(1);} /*每列100%*/
.col2 { @include col(2);} /*每列50%*/

//link
.link1 {color: $font-info-color;
  &:hover,
  &.active {color: $font-primary-color}
}
.link2 {color: $font-primary-color;
  &:hover,
  &:active {color: darken($font-primary-color,15);}
}

//hover 详细信息层
.detail_tr .detail_td {position: relative;width: 300px;}
.detail_tr .detail_td .detail_con {position: absolute;left: -80px;top: 50px;width: 500px;padding: 20px 15px;z-index: -1;border: 1px solid #338bf1;background: #fff;color: #999;border-radius: 4px;text-align: left;text-indent: 2em;@include opacity(0);}
.detail_tr .detail_td .detail_con:before {content:"";position: absolute;top: -9px;left: 50%;width: 15px;height: 15px;background: #fff;
  border: 1px solid #338bf1;border-right-color: transparent;border-bottom-color: transparent;z-index: 9;border-radius: 3px;
  @include transform(rotate(45deg));
}
.detail_tr:hover .detail_td .detail_con{@include opacity(1);z-index: 9;}

//badge 徽章
.badge {position: relative;top: -8px;@include inline-block;min-width: 10px;padding: 4px 5px;line-height: 10px;font-size: $font-default-size;background: $bg-danger;
  color: $font-white-color;white-space: nowrap;text-align: center;border-radius: 10px;}
// panel 板块
.panel {background: $bg-white;padding: 17px 20px;margin-bottom: 10px;border-top-left-radius: $border-default-radius;border-top-right-radius:$border-default-radius;
  .header {padding-bottom: 17px;margin-bottom: 30px;border-bottom: $border-default;
    .btn {margin-top: -8px;}
  }
  .header2 {position: relative;padding-bottom: 18px;margin-bottom: 17px;border-bottom: $border-default;
    h2 {color: $font-info-color;font-weight: normal;}
    .btn {position: absolute;right: 0;top: -13px;}
  }
  .header3 {padding:20px 0 40px;}
  .empty_tip {padding: 15px; font-size: $font-16;color: $font-default-color;}
}

//table
.table {width: 100%;max-width: 100%;table-layout: fixed;text-align: center;border: 1px solid #e5e5e5;
  td {padding: 0 5px;}
  thead {height: 48px;line-height: 48px;background: $bg-info;color: $font-info-color;border-top-left-radius: $border-default-radius;border-top-right-radius:$border-default-radius;  }
  tbody {
    tr {border-bottom: $border-default;}
    td {height: 80px;border-right: $border-default;
      a {display: block;}
     /* &:last-child a{padding-left: 30%;text-align: left;}*/
    }
  }
}

//tab-menu
.tab-menu {margin-bottom: 40px;padding-top: 5px;padding-left: 16px;color: $font-info-color;@extend .clearfix;
  ul {
    li {@include float-left;position: relative;margin-right: 20px;
      .badge {top: -9px;right: -2px;}
      a {position: relative;@include inline-block;color: $font-info-color;@include transition(color,0.3s,ease-in);
        &:after {content: "";position: absolute;bottom: -25px;opacity: 0;left: 0;width: 100%;height: 2px;background: $bg-primary;@include transition(all,0.3s,ease-in);}
        &:hover,&.active {
          color: $font-primary-color;
          &:after {opacity: 1;@include translateY(-5px);}
        }
      }
    }
  }
}


//form

  .radio-wrap{vertical-align: middle;
    //单选按钮hover样式
    input[type=radio]+label{
      &:hover{
        &:before{
          @include checked-radio(14px,$bg-primary,#fff);
          border:1px solid $border-primary-color;
        }
      }
    }
    input[type=radio] {
      @include opacity(0);position: absolute;left: -9999px;
    }
    input[type=radio]:checked + label:before{
      //单选按钮选中后样式
      @include checked-radio(14px,#fff,$bg-primary);
    }
    label{
      //单选按钮大小形状
      @include radio_checkbox(15px,15px,#fff,circle);
    }
  }
  .checkbox-wrap{
    input[type=checkbox] {
      @include opacity(0);position: absolute;left: -9999px;
    }
    input[type=checkbox]:checked + label:before{

      //蓝色复选框@include checked-checkbox(17px);
      //蓝色复选框text-shadow: none;
      @include checked-box(11px,10px,$bg-primary,$border-primary-color);

      //@include checked-checkbox(17px);
      //text-shadow: none;


    }
    label.check_box{
     // @include radio_checkbox(18px,18px,#338bf1,3px);
     @include new_checkbox(11px,10px,14px,14px,3px,$border-info-color);

    }
  }

//小符号组件

.asterisk{
  @include asterisk;
}

.ui-add{
  @include ui-add;
}

//横向form 表单样式
.form-inline {margin-bottom: 30px;
  input,
  select {border: $border-default;margin-right: 10px;}
  select {padding: 5px 5px 4px;}
  input[type='text'] {width: 120px;padding:5px ;}
  .Wdate {width: 60px;}
  .btn {vertical-align: top;}
}
//纵向表单样式
.form-block {
  .form-control {border: $border-default;margin-right: 10px;@include transition(all,0.3s);
    &.error {border-color: $font-danger-color;@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 110, 158, 0.75));}
    &:focus {border-color: #8cd2ff;outline: 0;@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6));}
  }
  dl {@extend .clearfix;}
  dt {float: left;width: 110px;line-height: 38px;margin-right: 15px;text-align: right;}
  dd {margin-left: 125px;margin-bottom: 15px;
    select.form-control {padding: 5px 5px 4px;}
    input.form-control {width: 340px;height: 38px;line-height: 38px;padding: 0 5px;}
  }
  dd.setLine {line-height: 38px;}
  .text {
    dt,dd {height: auto;line-height: normal;}
  }
  textarea.full { width:100%;padding: 5px;box-sizing: border-box;}
  .radio-wrap,.checkbox-wrap {line-height: 38px;}
  .btn-group {margin-left: 15px;text-align: left;}
  .bottom-btn {padding: 20px 0;
    .btn {margin-right: 15px;}
  }
  .get-code {@extend .btn;width: auto;min-width: 100px;color: $font-white-color;border-radius: 0;background: $bg-info;cursor: not-allowed;
    &.active {color: $font-primary-color;border: 1px solid $border-primary-color;cursor: pointer;background: none; }
  }
  label.error {color: $font-danger-color;padding-left: 5px;}
}

//弹窗表单样式
.table-form {margin: 20px;
  th{font-weight: normal;text-align: right;color: $font-info-color;}
  th,td {padding: 5px 10px;}
  .form-control {width: 120px;padding:5px;margin-right: 15px;border: $border-default;}
}

//pages 页码
.pageBar {@extend .clearfix;padding: 50px 0 30px;
  .number {float: left;font-size: 16px;color: #333;}
  .list {float: right;border: $border-default;border-radius: $border-default-radius;
    li {float: left;text-align: center;
      a {display: block;padding: 5px 12px;color: #333;
        &:hover,
        &.active {color: $font-primary-color;}
        &.active {background: $bg-default;}
      }
      span {display: block;padding: 5px 12px;background: $bg-default;color: $font-primary-color;}
    }
    .li {border-left: $border-default;
      &:first-child {border-left: none;}
    }

    .prev,.next {
      a {padding-left:15px;padding-right:15px;}
      i {@include inline-block;vertical-align: sub;@include icon-sprite(page_arrow);}
      &:hover i,
      &.active i{@include icon-sprite(page_arrow1);}
    }
    .prev {
      i {@include rotate(180deg);}
      &:hover i,
      &.active i {@include rotate(180deg);}
    }
    .next {border-left: $border-default;}

  }
}

.pageBar2 {@extend .clearfix;padding: 50px 0 30px;text-align: center;
  .number {float: left;font-size: 16px;color: #333;line-height: 40px;}
  .list {display: inline-block;
    li {float: left;margin: 0 5px;text-align: center;
      a {display: block;padding: 5px 12px;color: $font-info-color-light;background: $bg-info;border: 1px solid $bg-info;
        &:hover,
        &.active {background: #68a5ff;color: $font-white-color;border-color: #1474ff;}
      }
      span {display: block;padding: 5px 12px;background: #68a5ff;color: $font-white-color;border: 1px solid $bg-info;border-color: #1474ff;}
    }
    .li {border-left: $border-default;}
  }
  .control {float: right;
    input {width: 30px;padding: 5px 5px 6px;margin: 0 3px;border: $border-default;}
    a {margin-left: 10px;}
  }
}



/*end common style*/


$login-sprite-dimensions: true;
@import "login/*.png";

/*header*/
header {color: $font-info-color;
  .top_menu {position: fixed;z-index: 98;top: 0;width: 100%;@include pie-clearfix;height: 38px;line-height: 38px;border-bottom: $border-default;background: #f5f5f5;font-size: 12px;
    &.sticky {position: fixed;}
    .fl {
      //span {margin-right: 20px;}
      a {margin: 0 15px;}
      .login {
        i {@include inline-block;@include login-sprite(login);margin-right: 5px;}
        &:hover i {@include login-sprite(login1);}
      }
      .reg {
        i {@include inline-block;@include login-sprite(reg);margin-right: 5px;}
      }
    }
    .phone{margin-right: 15px;}
    .fr {
      span.text {}
      strong {color: $font-primary-color;}
    }
    .s-menu{
      color: #666;
      a{color: #666;}
      a.ill{
        display: block;
        i{
          display: inline-block;
          width: 8px; height: 7px;
          margin: 0 0 3px 6px;
          border: 1px solid;
          border-color: #999 #999 transparent transparent;@include transform(rotate(135deg));
          @include transition(transform 0.3s ease-in);
        }
      }
      &:hover .inner{display: block;top: 38px;right: 0;@include opacity(1);z-index: 9;}
      &:hover a.ill>i{margin-bottom: 0;@include transform(rotate(-45deg));}
      li{position: relative;}
      .inner{
        position: absolute;display: none;
        top: 0;right: -8px;
        width: 100px;
        background-color: #fff;
        z-index: -1;
        box-shadow: 0 3px 11px #ccc;
        @include opacity(0);
        @include transition(all 0.3s ease-in);
        li:hover {background-color: #f5f5f5;}
      }
    }
  }
  .bot_menu {background: $bg-primary;height: 80px;line-height: 80px;margin-top: 35px;
    .logo {width: 280px;}

    /*.car {
      a {padding: 10px;background: $bg-white;color: $font-info-color;
        img {@include icon-sprite(car);margin-right: 10px;}
        .r {@include triangle(5px,right,2px,$border-info-color);}
      }
    }*/
    .car a{padding: 5px 16px;background: $bg-default;border:$border-default;color: $font-info-color;border-radius: 30px;
      img {@include icon-sprite(car);margin-right: 10px;}
      .r {@include triangle(5px,right,2px,$border-info-color);}
    }
    ul {@include float-left;height: 80px;max-width: 700px;overflow: hidden;
      li {@include float-left;
        a {display: block;padding: 0 55px;color: #fefefe;text-decoration: none;
          &:hover,&.active {color: $font-white-color;background: #2c76ce;}
        }
      }
    }
  }

  nav.noborder {border-bottom: none;margin-bottom:0;}
  .menu_web {
    /*height: 100px;*/line-height: 100px;margin-bottom: 5px;margin-top: 38px;background: $bg-white;font-size: 16px;border-bottom: 2px solid $border-primary-color;
    .logo {width:280px;
      img {width: 196px;height: 48px;}
    }
    .car a{padding: 5px 16px;background: $bg-default;border:$border-default;display: inline-block;
      height: 30px;line-height: 30px;color: $font-info-color;border-radius: 30px;
      img {@include icon-sprite(car);margin-right: 10px;}
      .r {@include triangle(5px,right,2px,$border-info-color);}
    }
    ul#topMenu {margin:auto;max-width: 700px;max-height: 100px;padding-left: 34px;
      li {@include float-left;margin-right: 20px;
        a {padding: 4px 14px;color: #666;border: 1px solid #fff;@include transition(all 0.2s ease-in);
          &:hover,
          &.active {border-color:#2c88f4;border-radius: 30px;color: #2c88f4;}
        }
      }
    }

    .search_hot{
      .search{
        border: 2px solid #2c88f4;line-height: 38px;margin-top: 31px;
        input[type="text"]{border: none; width: 420px;height: 38px;display: inline-block;color: #b4b4b4;font-size: 14px;}
        input[type="submit"]{background-color: #2c88f4;display: inline-block;color: #FFFFFF;height: 41px;border: none;padding: 0 40px;font-size: 18px;}
        i{display: inline-block;@include login-sprite(search_m);@include float-left;margin: 0 7px;}
      }
      .hot_word{@include clearfix;height: 35px;line-height: 35px;
        li{@include float-left;margin-right: 15px;
          a{color: #909090;font-size: 12px;
          &:hover{
            color: #338bf1;
          }
          }
        }
      }
    }
  }

}

main {
  .breadcrumb {padding: 15px 0;color: $font-info-color;
    a {color: $font-primary-color;padding-bottom: 2px;margin: 0 3px;border-bottom: 2px solid transparent;
      &:hover {border-bottom-color: $font-primary-color;}
    }
  }
  .leftNav {width: $leftNav-w;margin-right: $leftNav-m;margin-bottom: 50px;@include float-left;background: $bg-white;
    dl{
      dt{
        .head {position: relative;display: block;padding: 21px 0;color: $font-primary-color;text-align: center;
          img {position: absolute;left: 38px;}
          .center {@include icon-sprite(person1);}
          .money {@include icon-sprite(money1);}
          .trade {@include icon-sprite(trade1);}
          .info {@include icon-sprite(info1);}

          &.active {background: $bg-primary;color: $font-white-color;
            .center {@include icon-sprite(person);}
            .money {@include icon-sprite(money);}
            .trade {@include icon-sprite(trade);}
            .info {@include icon-sprite(info);}
          }
        }
      }
      dd {
        a {display: block;padding: 11px;color: $font-info-color;text-align: center;
          &:hover,&.active {color: $font-primary-color;background: #eaf0fb; }
        }
      }
    }
  }
}
main .main { @include float-left;width: $main-w;margin-bottom: 50px;}

aside.ad_bar_footer {margin-top: 50px;background: $bg-white;}
footer {background: $bg-dark;color: $font-info-color;
  dl.friends_link {padding: 40px 0 36px;border-bottom: 1px solid #3d4355;
    dt {float: left;padding-right: 25px;margin-right: 25px;border-right: 1px solid #5c6170;color: $font-white-color;font-size: $font-16;}
    dd {float: left;margin-right: 70px;
      a {color: #888;font-size: $font-16;
        &:hover {color: $font-primary-color;}
      }
    }
  }
  ul.item{@include pie-clearfix;padding-top: 40px;padding-bottom: 60px;
    li {@include float-left;
      dt {padding-bottom: 20px;color: $font-white-color;font-size: $font-16;}
      dd {margin-bottom: 8px;color: #888;
        a {color: #888;
         &:hover {color: $font-primary-color;}
        }
        .wx_service{border: 1px solid;border-radius: 25px;padding: 7px 15px;display: inline-block;margin-top: 10px;}
      }
      dd.tel {font-size: 30px;height: 48px;line-height: 48px;margin-bottom: 5px;color: $font-white-color;
        strong {font-weight: normal}
      }
    }
  }
  .bot_bar {height: 75px;line-height: 75px;@include pie-clearfix;background: #2f3539;
    small {margin-left: 10px;}
    .identify  a{margin-left: 10px;
      img {width: 102px;height: 37px;}
    }
  }
}

/*=======================右侧工具条======================*/
@include keyframes(leftFadeIn){
  0% {@include opacity(0);@include transform(translate(-15px));}
  100% {@include opacity(1);@include transform(translate(0));}
}
$toolbar-sprite-dimensions: true;
$toolbar-spacing: 10px;
@import "toolbar/*.png";
#toolbar{position: fixed;z-index: 999;top: 0; bottom:0;right: -280px;
  .toolbar-menu{position: relative;float: left;width: 40px;min-height: 100%;background-color: #888;}
  .tb_m_off{display: block;margin: 25px auto;@include toolbar-sprite(bar_r);cursor: pointer;}
  .top {position: absolute;bottom: 20px;width: 100%;height: 40px;line-height: 40px;margin-bottom: 3px;text-align: center;
    &:hover {background: #2c88f4;}
    img {@include toolbar-sprite(settled); @include transform(rotate(-90deg));}
  }
  .toolbar-list{position: absolute;top: 50%;
    li {position: relative;width: 40px;line-height: 40px;margin-bottom: 3px;text-align: center;color: #fff;
      .detail {display: none;position: absolute;width: auto;min-width: 120px;white-space:nowrap;right: 41px;top: 0;font-size: 16px;
        @include animation(leftFadeIn 0.3s ease-out);
        .con {line-height: 24px;text-align: center;color: #2c88f4;background: #888;
          p {padding: 5px 15px;transition: background 0.2s ease-in;border-bottom: 1px dashed #ccc;
            &:last-child {border-bottom: none;}
          a {color: #fff;}
          }
          p:hover {background: #2c88f4;}
          &:after {content:"";position: absolute;right: -14px;top: 13px;display: inline-block;width: 0;height: 0;border: 8px solid;border-color: transparent transparent transparent #888;}
        }
      }
      &.kefu img{@include toolbar-sprite(kefu);}
      &.user img{@include toolbar-sprite(user);}
      &.car{position: relative;border-bottom: 1px dashed #ccc;
        &.active {background: #2c88f4;}
        i{position: absolute;right: 2px;top: -3px;}
        span {display: inline-block;width: 25px;line-height: 22px;color: #fff;}
        img {@include toolbar-sprite(bar-car);}
      }
      &:hover{background: #589afd;
        .detail{display: block;}
      }
    }
  }
  .toolbar-tb{position: relative;float: left;  width: 280px;  background-color: #f5f5f5;  height: 100%;
    .tb-title{
      display: block;
      background-color: #FFFFFF;
      padding: 20px 15px;
      color: #222;
      span{font-size: 16px;margin-left: 10px;}
    }
    .tb-loading {position: absolute;top: 65px;left: 0;right: 0;bottom: 0;padding-top: 40px;background: #fff;z-index: 99;text-align: center;}
    &.loaded .tb-loading {display: none;}
    .tb-content{
      width: 280px;
      margin: auto;
      overflow-y: scroll;
     .tb-c{background-color: #FFF;margin-top: 10px;border-radius: 5px;padding:20px 15px;@include pie-clearfix;  position: relative;
       .tb-close{margin: 0;position: absolute;right: 10px;top:10px;display: block;@include toolbar-sprite(tb-close)}
       dd {
         .break-word {color: #222;font-size: 12px; }
         span{font-size: 14px;color: #ff5555; }
       }
       .tb-inner{margin-top: 12px;}
       dt{height: 80px;line-height:80px;margin-right:15px;}
     }
    }
    .tb-bottom{
      text-align: center;
      position: absolute;
      bottom: 20px;
      left:20px;
      width: 260px;
      height: 90px;
      button{background-color: #2c88f5;width: 100%;height: 42px;line-height: 42px;border-radius: 5px;border:none;color:#fff;margin-top: 20px;
      i.settled{vertical-align: middle;display: inline-block;width: 20px;height: 20px;margin: 0 0 0 15px;@include toolbar-sprite(settled); }
      }
    }

  }
  .cut,.add{text-align: center;}
}

/*-----------------------common css end 公共scss 结束分界线--------------------------*/
//首页顶部广告
.ad_index{

  .ad_vert{position: fixed;top: 0;left:0;width: 100%;height: 80px;margin-bottom: 40px; background-color: #fff;z-index: 98;

      .close_btn{
        top: 5px;right: 45px;z-index: 999;
        background: url("/res/mpe/img/closebtn.png") no-repeat;
        background-position: -149px -31px;
        display: block;
        position: fixed;
        width: 30px;
        height: 30px;
      }
    .ad_index_img{
      display: block;
      width: 100%;
      height: 80px;
      //background: url("/res/mpe/img/ad_index.jpg") no-repeat;
      margin-left: 0px;
    }
  }
  header .top_menu {top: 80px; transition: top 0.1s ease-out;}
  header .menu_web {margin-top: 118px}
  &.closed {
    .ad_vert {display: none;}
    header .top_menu {top: 0;}
    header .menu_web {margin-top: 38px}
  }
}